<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryParamsRef"
      :inline="true"
      class="globalSerchFormStyle"
      label-width="68px"
    >
      <el-row>
        <el-col
          :span="6"
          v-if="['', null].includes($store.state.user.userLevel)"
        >
          <el-form-item label="油企名称" prop="enterpriseId" size="small">
            <el-select
              style="width: 180px"
              v-model="queryParams.enterpriseId"
              :clearable="true"
              filterable
              placeholder="请选择油企"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="车队名称" prop="fleetName">
            <el-select
              style="width: 190px"
              v-model="queryParams.fleetName"
              :clearable="true"
              filterable
              placeholder="请选择车队名称"
            >
              <el-option
                v-for="(item, index) in fleetList"
                :key="item.id"
                :value="item.fleetName"
                :label="item.fleetName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="主队号" prop="cardNumber">
            <el-input
              v-model="queryParams.cardNumber"
              placeholder="请输入主队号"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="子卡号" prop="cardNumberSub">
            <el-input
              v-model="queryParams.cardNumberSub"
              placeholder="请输入子卡号"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="collapse">
        <el-col :span="6">
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入手机号"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="加入时间" prop="dateRangeCreatedDate">
            <el-date-picker
              v-model="dateRangeCreatedDate"
              size="small"
              style="width: 190px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getList"
          size="mini"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="resetQuery"
          size="mini"
          plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          id="closeSearchBtn"
          size="mini"
          @click="
            (closeSearch) => {
              collapse = !collapse;
            }
          "
        >
          {{ collapse ? "收起" : "展开更多" }}
          <i :class="collapse ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"></i>
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button icon="el-icon-plus" @click="addSonCard" size="mini" plain>
          新增
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          icon="el-icon-delete"
          @click="gotoDelete"
          size="mini"
          plain
          :disabled="selectionsList.length <= 0"
        >
          删除
        </el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          icon="el-icon-upload2"
          @click="handleImport"
          size="mini"
          plain
          >导入</el-button
        >
      </el-col> -->
    </el-row>

    <el-table
      :data="sonCardTableData"
      style="width: 100%"
      v-loading="loading"
      @selection-change="handleSelect"
    >
      <el-table-column type="selection" width="50" align="left">
      </el-table-column>
      <el-table-column
        prop="enterpriseName"
        label="油企名称"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="fleetName"
        label="车队名称"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="cardNumber"
        label="主卡号"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="cardNumberSub"
        label="子卡号"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="子卡用户姓名"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="mobilePhone"
        label="手机号"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="truckNumber"
        label="车牌号"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="balance"
        label="子卡余额"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="spendAmount"
        label="消费总额"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="加入时间"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="updatedTime"
        label="最近一次消费时间"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column fixed="right" prop="operation" label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleEditOrShowSonCard('detail', scope.row)"
            >查看</el-button
          >
          <el-button
            type="text"
            @click="handleEditOrShowSonCard('edit', scope.row)"
            >编辑</el-button
          >
          <el-button type="text" @click="handleDistributionAmt(scope.row)"
            >分配金额</el-button
          >
          <el-button type="text" @click="gotoRecycle(scope.row)"
            >回收</el-button
          >
          <el-button type="text" @click="gotoOrderRecordList(scope.row)">
            消费记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 查看或编辑子卡 -->
    <EditOrShowSonCard
      :editOrShowSonCardDialog.sync="selectInfo.editOrShowSonCardDialog"
      :currentOperation.sync="selectInfo.currentOperation"
      :currentData="selectInfo.currentRowData"
      @reloadData="getList"
    ></EditOrShowSonCard>

    <!-- 分配子卡金额 -->
    <DistributionAmt
      :distributionAmtDialog.sync="distributionAmtDialog"
      :currentData="selectInfo.currentRowData"
      @reloadData="getList"
    >
    </DistributionAmt>

    <!--  消费记录-->
    <OrderRecord
      :orderRecordDialog.sync="orderRecordDialog"
      :currentData="selectInfo.currentRowData"
    ></OrderRecord>

    <!-- 子卡数据导入对话框 -->
    <ImportData :importDialog.sync="importDialog"></ImportData>

    <!-- 新增子卡 -->
    <AddSonCard :addSonCardDialog.sync="addSonCardDialog"></AddSonCard>

    <!-- 回收子卡弹框 -->

    <el-dialog
      title="回收子卡"
      :visible.sync="recycleDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        确定回收
        <b>
          {{
            selectInfo.currentRowData.name
              ? selectInfo.currentRowData.name
              : "子卡"
          }}
        </b>
        额度吗？
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="recycleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleRecycle"> 确 定 </el-button>
      </span>
    </el-dialog>

    <!-- 删除子卡 -->
    <el-dialog
      title="删除子卡"
      :visible.sync="deleteDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span> 确定删除所选子卡？ </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSonCardListApi,
  recycleSonCardlLimitApi,
  patchDeleteSonCardApi,
} from "@/api/teamCard/sonCard";
import { getFleetCardListApi } from "@/api/teamCard/teamCardList";
import { enterpriseList } from "@/api/station/orderHistory";
import EditOrShowSonCard from "./editOrShowSonCard.vue";
import DistributionAmt from "./distribution_amt.vue";
import OrderRecord from "./order_record.vue";
import AddSonCard from "./addSonCard.vue";
import ImportData from "./importData.vue";
import { cloneDeep } from "lodash";
export default {
  name: "SonCardList",
  components: {
    EditOrShowSonCard,
    DistributionAmt,
    OrderRecord,
    ImportData,
    AddSonCard,
  },
  data() {
    return {
      total: 0,
      loading: false,
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        cardNumber: "",
        cardNumberSub: "",
        dateRangeCreatedDate: [],
        enterpriseId: "",
        fleetName: "",
        phone: "",
      },
      enterpriseList: [], // 油站列表
      collapse: false, // 是否折叠搜索条件
      dateRangeCreatedDate: [], // 时间范围
      sonCardTableData: [],
      selectInfo: {
        currentRowData: {}, // 当前选中行数据
        currentOperation: "", // 当前操作
        editOrShowSonCardDialog: false,
      },
      selectionsList: [], // table多选
      distributionAmtDialog: false,
      orderRecordDialog: false,
      importDialog: false,
      recycleDialogVisible: false, // 回收弹框
      deleteDialogVisible: false,
      fleetList: [], // 车队列表

      // 添加子卡
      addSonCardDialog: false,
    };
  },
  created() {
    this.getEnterpriseList(); // 获取油企数据
    this.getList();
    this.getFleetList();
  },
  methods: {
    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },
    // 查询车队列表
    getFleetList() {
      getFleetCardListApi().then((res) => {
        console.log("车队列表", res);
        this.fleetList = res.rows;
      });
    },
    // 重置搜索表单
    resetQuery() {
      this.resetForm("queryParamsRef");
      this.dateRangeCreatedDate = [];
      this.getList();
    },

    // 点击新增
    addSonCard() {
      this.addSonCardDialog = true;
    },

    // 获取子卡列表数据
    getList() {
      this.loading = true;
      const params = {
        ...this.queryParams,
        status: 2,
      };
      if (this.dateRangeCreatedDate && this.dateRangeCreatedDate.length) {
        params.beginTime = this.dateRangeCreatedDate[0];
        params.endTime = this.dateRangeCreatedDate[1];
      }
      //  子卡的审核状态  1：待审核  2 审核通过  3审核不通过
      getSonCardListApi(params).then((res) => {
        this.sonCardTableData = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },

    // 编辑或查看子卡操作
    handleEditOrShowSonCard(action, row) {
      this.selectInfo.currentRowData = cloneDeep(row);
      this.selectInfo.currentOperation = action;
      this.selectInfo.editOrShowSonCardDialog = true;
    },
    // 分配金额
    handleDistributionAmt(row) {
      this.selectInfo.currentRowData = cloneDeep(row);
      this.distributionAmtDialog = true;
    },
    // 消费记录
    gotoOrderRecordList(row) {
      this.selectInfo.currentRowData = cloneDeep(row);
      this.orderRecordDialog = true;
    },
    // 导入数据
    handleImport() {
      this.importDialog = true;
    },

    gotoRecycle(row) {
      this.selectInfo.currentRowData = cloneDeep(row);
      this.recycleDialogVisible = true;
    },
    // 回收子卡额度
    handleRecycle() {
      const id = this.selectInfo.currentRowData.id;
      recycleSonCardlLimitApi(id).then((res) => {
        this.msgSuccess("回收成功");
        this.recycleDialogVisible = false;
        this.getList();
      });
    },
    // 选中行
    handleSelect(section) {
      this.selectionsList = section;
    },
    gotoDelete() {
      let isHasWating = this.selectionsList.some((item) => item.balance > 0);
      if (isHasWating) {
        this.$message.warning("所选子卡中，存在余额不为0");
      } else {
        this.deleteDialogVisible = true;
      }
    },
    // 删除子卡
    handleDelete() {
      let ids = this.selectionsList.map((item) => item.id).join(",");
      patchDeleteSonCardApi(ids).then((res) => {
        this.msgSuccess("删除子卡成功");
        this.deleteDialogVisible = false;
        this.getList();
      });
    },
    handleClose() {
      this.recycleDialogVisible = false;
    },
  },
  watch: {
    addSonCardDialog: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        if (oldVal) {
          this.getList();
        }
      },
    },
  },
};
</script>
<style scoped lang="scss"></style>
